import HttpUtils from "pages/ruijing/common/utils/HttpUtils";
import "./style.scss";
function FundMen(props) {

    //联调测试数据
    const testdata = [
        {
            jobNumber: "gyd103",
            name: "贵医大PI0",
            orgId: 38,
            userId: 9170
        },
        {
            jobNumber: "gyd104",
            name: "贵医大PI1",
            orgId: 38,
            userId: 9171
        },
        {
            jobNumber: "gyd105",
            name: "贵医大PI2",
            orgId: 38,
            userId: 9172
        },
        {
            jobNumber: "gyd106",
            name: "贵医大PI3",
            orgId: 38,
            userId: 9173
        },
        {
            jobNumber: "gyd107",
            name: "贵医大PI4",
            orgId: 38,
            userId: 9174
        },
        {
            jobNumber: "gyd108",
            name: "贵医大PI5",
            orgId: 38,
            userId: 9175
        },
        {
            jobNumber: "gyd109",
            name: "贵医大PI6",
            orgId: 38,
            userId: 9176
        },
        {
            jobNumber: "gyd100",
            name: "贵医大PI8",
            orgId: 38,
            userId: 9178
        }
    ]

    //初始化插件入参
    const {deptId,selectMen} = props;

    //初始化插件状态值及状态更新方法
    const [fundMenStatus, updatefundMenStatus] = usePartState({
        DeptId:deptId,
        fundMenList:null,
        selectedMen:""
    })

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...fundMenStatus, ...value };
        console.log(newValue);
        updatefundMenStatus(newValue);
    }

    //更新视图数据方法外部接口
    function updateFundMenList(fundmenlist,depid){
        _updateData(
            (fundMenStatus.fundMenList = fundmenlist),
            (fundMenStatus.DeptId = depid),
            (fundMenStatus.selectedMen = "")
        )
    }

    //获取经费负责人列表
    function getFundMen(deptId) {
        let params = { deptId: deptId};
        HttpUtils.getFundMen(params)
            .then(res => {
                console.log(res);
                let managers = JSON.parse(JSON.stringify(res.data.managers));
                updateFundMenList(managers,deptId);
            })
            .catch(err => {
                console.log(err);
            });
    }

    //选择审批人
    function fundMenSelect(e){
        console.log("fundMenSelect",e.target.value);
        selectMen([e.target.value]);
        _updateData(
            (fundMenStatus.selectedMen = e.target.value)
        )
    }

    //componentOnMount
    React.useEffect(() => {
        console.log("FundMenUseEffect",fundMenStatus.DeptId);
        getFundMen(deptId);
    },[]);

    if(fundMenStatus.DeptId!=null&&fundMenStatus.DeptId!=""&&deptId!=fundMenStatus.DeptId){
        getFundMen(deptId);
    }else{
        console.log(fundMenStatus.fundMenList);
    }

    return (
        <div className="rj_chose-sub">
            <span className="rj_chose-sub-title">请选择审批人</span>
            <div className="zen_il-bl" style={{width:"1000px"}}>
            {fundMenStatus.fundMenList&&fundMenStatus.fundMenList.map((item,index) =>
                {
                    return <div className="zen_l-h-25 zen_il-bl zen_m-t-7 zen_m-r-50 zen_m-b-30" key={index}>
                        <input type={"radio"} key={item.userId} value={item.userId} onClick={e =>{fundMenSelect(e)}} checked={item.userId==fundMenStatus.selectedMen}/>
                        <div className="zen_il-bl zen_v-t zen_m-l-10">
                            <span>
                                {item.name}
                            </span><br />
                            <span>经费负责人</span>
                        </div>
                    </div>
                }
            )}
            </div>
        </div>
    )
}

export default FundMen;